<template>
    <div>
        <!-- 中间顶部图片区域 -->
        <div class="center-section-item">
            <img src="@/assets/image/bg/left.png" alt="左侧装饰图"> <!-- 左侧装饰元素 -->
            <div>
                <!-- 项目图片展示区（示例四张图片） -->
                <img src="@/assets/image/bg/5.png" alt="项目图片1">
                <img src="@/assets/image/bg/7.png" alt="项目图片2">
                <img src="@/assets/image/bg/8.png" alt="项目图片3">
            </div>
            <img src="@/assets/image/bg/right.png" alt="右侧装饰图"> <!-- 右侧装饰元素 -->
        </div>

    </div>
</template>
<script setup lang="ts">
// import { ref } from 'vue'
// 中间部分卡片数据

</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.center-section-item {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

.center-section-item {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 20px;
    /* 添加内边距 */
}

.center-section-item img {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.center-section-item div img {
    width: 80px;
    height: 80px;
}

.center-section-item-card {
    color: #fff;
    width: 150px;

}

.center-section-item-card p {
    font-size: 22px;
    font-family: MyCustomFont;
}

.center-section-item-card div {
    color: #999;
}

.center-section-item-card ul {
    color: #0af;
    margin-top: 10px;
}

.center-section-item-card ul span {
    color: #fff;
    font-size: 18px;
    margin-left: 10px;
    font-family: MyCustomFont;
}

.center-section-item-card:nth-child(2) {
    position: absolute;
    left: 20px;
    top: 240px;
}

.center-section-item-card:nth-child(3) {
    position: absolute;
    left: 20px;
    bottom: 330px;
}

.center-section-item-card:nth-child(4) {
    position: absolute;
    right: 0;
    top: 250px;
}

.center-section-item-card:nth-child(5) {
    position: absolute;
    right: 0;
    bottom: 310px;
}
</style>